<!--重置密码-->
<template>
  <div class="container setting login">
    <UserSidebar style="margin-top: 2.5rem" />
    <div class="setting-frame">
      <div class="title-frame" v-if="isMobile">
        <p style="margin-left: 0.3rem">My Settings</p>
        <div class="title-panel">
          <div
            class="nav-frame ac-bg"
            v-for="(item, index) in navList"
            :key="index"
            @click="clickNav(index)"
          >
            <div class="nav-panel">
              <div class="nav-fast">
                <img
                  class="icon"
                  :style="index != 0 ? 'width:1.1rem' : ''"
                  :src="item.icon"
                />
              </div>
            </div>
            <div class="nav-label">
              <p class="label">{{ item.name }}</p>
              <div class="icon-frame" v-if="navIndex == index"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="setting-panel">
        <div class="page-title" v-if="!updateOk">
          <p class="title">Change Password</p>
        </div>
        <div class="login-frame" style="margin-top: 0" v-if="!updateOk">
          <div class="input-frame" style="margin-top: 0">
            <div class="input-panel">
              <p class="input-label">
                Current password:<span class="must">*</span>
              </p>
              <div class="input-fast">
                <input
                  v-model="form.password"
                  @input="passwordChange"
                  class="input-in"
                  type="password"
                />
                <van-icon
                  v-if="form.password"
                  :name="check.password ? 'passed' : 'close'"
                  :color="check.password ? '#07c160' : '#ee0a24'"
                />
              </div>
            </div>
            <div class="input-panel">
              <p class="input-label">
                New password:<span class="must">*</span>
              </p>
              <div class="input-fast">
                <input
                  v-model="form.new_password"
                  @input="newPasswordChange"
                  class="input-in"
                  type="password"
                />
                <van-icon
                  v-if="form.new_password"
                  :name="check.new_password ? 'passed' : 'close'"
                  :color="check.new_password ? '#07c160' : '#ee0a24'"
                />
              </div>
            </div>
            <div class="input-panel">
              <p class="input-label">
                Confirm New password:<span class="must">*</span>
              </p>
              <div class="input-fast">
                <input
                  v-model="form.new_password_confirmation"
                  @input="newPasswordConChange"
                  class="input-in"
                  type="password"
                />
                <van-icon
                  v-if="form.new_password_confirmation"
                  :name="check.new_password_confirmation ? 'passed' : 'close'"
                  :color="
                    check.new_password_confirmation ? '#07c160' : '#ee0a24'
                  "
                />
              </div>
            </div>
          </div>
          <div class="btn-frame" @click="clickSure">
            <span>Submit</span>
          </div>
          <div class="tips-frame">
            <p class="tips">
              The password must contain 8-20 English letters and numbers
            </p>
          </div>
        </div>
        <div class="success-frame" v-if="updateOk">
          <van-icon name="passed" size="2.6rem" color="green" />
          <div class="tips-frame">
            <p>Modified successfully &nbsp;</p>
            <p class="login-label ac-bg" @click="clickSignin">Sign In</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        password: "",
        new_password: "",
        new_password_confirmation: "",
      },
      check: {
        password: false,
        new_password: false,
        new_password_confirmation: false,
      },
      updateOk: false,
      navList: [
        {
          icon: require("@/assets/imgs/user/mysetting.png"),
          name: "My Settings",
          status: 0,
        },
        {
          icon: require("@/assets/imgs/user/myaddress.png"),
          name: "My Address",
          status: 0,
        },
        {
          icon: require("@/assets/imgs/user/changep.png"),
          name: "Change Password",
          status: 0,
        },
      ],
      navIndex: 2,
    };
  },
  methods: {
    //切换NAV
    clickNav(index) {
      if (index == 0) {
        this.$router.replace({
          path: "/user/setting",
        });
      } else if (index == 1) {
        this.$router.replace({
          path: "/user/address",
        });
      } else if (index == 2) {
        this.$router.replace({
          path: "/user/changepassword",
        });
      }
    },
    //输入旧密码
    passwordChange(val) {
      let erg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
      let bool = erg.test(this.form.password);
      if (bool) {
        this.check.password = true;
      } else {
        this.check.password = false;
      }
    },
    //输入新密码
    newPasswordChange(val) {
      //let erg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
      let erg =  /(?!\d+$)(?!^[a-zA-Z]+$)(?!^[_-]+$).{8,20}/;
      let bool = erg.test(this.form.new_password);
      if (bool) {
        this.check.new_password = true;
      } else {
        this.check.new_password = false;
      }
      if (
        this.form.new_password_confirmation != "" &&
        this.form.new_password != this.form.new_password_confirmation
      ) {
        this.check.new_password_confirmation = false;
      }
    },
    //再次输入新密码
    newPasswordConChange(val) {
      //let erg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
      let erg =  /(?!\d+$)(?!^[a-zA-Z]+$)(?!^[_-]+$).{8,20}/;
      let bool = erg.test(this.form.new_password_confirmation);
      if (bool) {
        if (this.form.new_password_confirmation == this.form.new_password) {
          this.check.new_password_confirmation = true;
        } else {
          this.check.new_password_confirmation = false;
        }
      } else {
        this.check.new_password_confirmation = false;
      }
    },
    //确认修改
    clickSure() {
      if (
        this.form.password == "" ||
        this.form.new_password == "" ||
        this.form.new_password_confirmation == ""
      ) {
        this.$toast("Please fill in the password");
      } else if (
        this.check.password == false ||
        this.check.new_password == false ||
        this.check.new_password_confirmation == false
      ) {
        this.$toast("Please check the Password");
      } else if (this.form.password == this.form.new_password) {
        this.$toast("Old and new passwords cannot be the same");
      } else {
        this.tips.startLoadingToast();
        this.$store
          .dispatch("user/resepwd", this.form)
          .then((res) => {
            this.tips.closeToast();
            const { code, msg } = res;
            if (code === 0) {
              //修改成功
              this.updateOk = true;
              localStorage.setItem("userInfo", {});
              this.$store.commit("user/setUserInfo", {});
              this.$nuxt.$store.commit("user/setIsLogin", false);
            } else {
              this.$toast.fail(msg);
            }
          })
          .catch((error) => {
            this.tips.closeToast();
            const { data, statusText } = error.response;
            if (data.msg) {
              this.$toast.fail(data.msg);
            } else {
              this.$toast.fail(statusText);
            }
          });
      }
    },
    //跳转登陆
    clickSignin() {
      this.updateOk = false;
      this.$router.replace({
        path: "/login",
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "./setting/setting.less";
@import "../login/login.less";
</style>